<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎登录</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/myinfo.css">
</head>

<style>
    body {
      background: #060e1b;
      overflow: hidden;
    }
    
    canvas {
      margin-top: -25%;
    }
    
    /* Demo Buttons Style */
    .codrops-demos {
            font-size: 0.8em;
            text-align:center;
            position:absolute;
            z-index:99;
            width:96%;
    }
    
    .codrops-demos a {
            display: inline-block;
            margin: 0.35em 0.1em;
            padding: 0.5em 1.2em;
            outline: none;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            border-radius: 2px;
            font-size: 110%;
            border: 2px solid transparent;
            color:#fff;
    }
    
    .codrops-demos a:hover,
    .codrops-demos a.current-demo {
            border-color: #383a3c;
    }
    </style>
<body>
    <div id="container">
        <div id="top">
            <h1>xxx的资料</h1>
        </div>
        <div class="navberCard" style="opacity: 0.6;">
            <nav class="navbar navbar-expand-lg navbar-light bg-light" id="nav">
                <a class="navbar-brand" href="#" onclick="index()">首页</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#" onclick="questionnaire()">调查问卷 <span
                                    class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="newCreate()">发布问卷</a>
                        </li>
                        <li class="nav-item active" id="my">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-toggle="dropdown" aria-expanded="false">
                                我的
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="wo"><!-- 
                                <a class="dropdown-item" href="/index/goMyInfo" onclick="myInfo()">我的资料</a>
                                <a class="dropdown-item" href="#" onclick="myIssus()">我的发布</a>
                                 -->
                                <a class="dropdown-item" href="/index/goAdminRevise" onclick="">修改密码</a>
                                <a class="dropdown-item" href="#" onclick="logout()">退出登录</a>
                            </div>
                        </li>
                    </ul>
                </div>

            </nav>

        </div>

        <div class="card" style="width: 18rem;">
            <img src="../static/imgs/1.jpeg" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">xxx</h5>
                <p class="card-text">欢迎使用调查问卷系统，想使用的话直接点击按钮哦，我的资料可以修改哦</p>
                <a href="#" class="btn btn-primary">编辑资料</a>
            </div>
        </div>
    </div>

    <script src="../static/js/canvas-particle.js"></script>
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <script>
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {
            });
        }
        function index() {
            axios({
                method: 'post',
                url: '/goIndex'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/';
                }
            }).catch((err) => {
            });
        }
        function myInfo() {
            axios({
                method: 'post',
                url: '/myInfo'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/index/goMyInfo';
                }
            }).catch((err) => {
            });
        }
        function myIssus() {
            axios({
                method: 'post',
                url: '/myIssus'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/goMyIssus';
                }
            }).catch((err) => {
            });
        }

        function questionnaire() {
            axios({
                method: 'post',
                url: '/questionnaire'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/index/goQuestionnaire';
                }
            }).catch((err) => {
            });
        }
        function newCreate() {
            axios({
                method: 'post',
                url: '/newCreate'
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/goNewCreate';
                }
            }).catch((err) => {
            });
        }
    </script>

    <canvas id="canvas"></canvas>
    <script>
        "use strict";

        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            w = canvas.width = window.innerWidth,
            h = canvas.height = window.innerHeight,

            hue = 217,
            stars = [],
            count = 0,
            maxStars = 1200;

        var canvas2 = document.createElement('canvas'),
            ctx2 = canvas2.getContext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
            gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.025, '#fff');
        gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addColorStop(1, 'transparent');

        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();

        // End cache

        function random(min, max) {
            if (arguments.length < 2) {
                max = min;
                min = 0;
            }

            if (min > max) {
                var hold = max;
                max = min;
                min = hold;
            }

            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function maxOrbit(x, y) {
            var max = Math.max(x, y),
                diameter = Math.round(Math.sqrt(max * max + max * max));
            return diameter / 2;
        }

        var Star = function () {

            this.orbitRadius = random(maxOrbit(w, h));
            this.radius = random(60, this.orbitRadius) / 12;
            this.orbitX = w / 2;
            this.orbitY = h / 2;
            this.timePassed = random(0, maxStars);
            this.speed = random(this.orbitRadius) / 900000;
            this.alpha = random(2, 10) / 10;

            count++;
            stars[count] = this;
        }

        Star.prototype.draw = function () {
            var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
                y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
                twinkle = random(10);

            if (twinkle === 1 && this.alpha > 0) {
                this.alpha -= 0.05;
            } else if (twinkle === 2 && this.alpha < 1) {
                this.alpha += 0.05;
            }

            ctx.globalAlpha = this.alpha;
            ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
            this.timePassed += this.speed;
        }

        for (var i = 0; i < maxStars; i++) {
            new Star();
        }

        function animation() {
            ctx.globalCompositeOperation = 'source-over';
            ctx.globalAlpha = 0.8;
            ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
            ctx.fillRect(0, 0, w, h)

            ctx.globalCompositeOperation = 'lighter';
            for (var i = 1, l = stars.length; i < l; i++) {
                stars[i].draw();
            };

            window.requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>